<template>
    <van-sticky>
      <van-search
  v-model="value"
  position="fixed" 
  show-action
  shape="round"
  background=" linear-gradient(200deg,#c4e8fb,#2a95f8)"
  label="测测"
  placeholder="请输入搜索关键词"
  @search="onSearch"
>
  <template #action>
    <div @click="onClickButton">
      <van-icon name="add-o"  size="25" color="#fff"/>
      <van-icon name="smile-o" size="25" color="#fff"/>
    </div>
  </template>
</van-search>
</van-sticky>


<div class="header">
  <van-image
  round
  width="55px"
  height="55px"
  src="../assets/images/1.jpg"
/>
<h2 class="bold" style="display: inline" >USER20001010823</h2>
    <van-icon name="exchange" size="25px"/><h2 style="display: inline">的今日心情</h2>


    <div class="yunshi">
      <van-icon class="iconfont icon-aiqing" ></van-icon>
      <h2>爱情</h2>
      <div class="hline"></div>
      <h3>50</h3> 
    </div>
    <div class="yunshi">
      <van-icon class="iconfont icon-shiye" ></van-icon>
      <h2>事业</h2><div class="hline1"></div><h3>79</h3>  
    </div>
    <div class="yunshi">
      <van-icon class="iconfont icon-caifu" ></van-icon>
      <h2>财富</h2><div class="hline2"></div><h3>98</h3>
    </div>
    <div class="luck">
          <van-row gutter="18">
  <van-col span="8" class="line"><van-icon class="iconfont icon-shitou" color="#fff">橄榄石<p>幸运石</p></van-icon></van-col>
  <van-col span="8" class="line"><van-icon class="iconfont icon-color"  color="#fff">蜜桃粉<p>幸运色</p></van-icon></van-col>
  <van-col span="8" class="line"><van-icon class="iconfont icon-meigui"  color="#fff">玫瑰<p>幸运花</p> </van-icon></van-col>
</van-row>
    </div> 
    <h4>此刻容易在网络或者朋友圈子里获得欣赏和认同，也适合积攒人气、粉丝，能感受到所做事情的意义和价值</h4> 

    <div class="chuangkou">

 <chuang-nav/>
 <adver-nav/>
 <list-nav/>

    </div>

</div>



<bottom-nav/>






</template>



<script>
import { ref } from 'vue';
import"../assets/icon/iconfont.css";
import BottomNav from '../components/BottomNav.vue'
import AdverNav from '../components/AdverNav.vue'
import ChuangNav from '../components/ChuangNav.vue'
import ListNav from '../components/ListNav.vue'


export default 
{
  setup() {
    const value = ref('');
    const onSearch = (val) => showToast(val);
    const onClickButton = () => showToast(value.value);
    return {
      value,
      onSearch,
      onClickButton,
    };
  },
  components:{
            BottomNav,
            AdverNav,
            ChuangNav,
            ListNav,
  }
};

</script>

<style>

h2{
  font-size: 15px;
  color: #fff;
  margin-left: 10px;
}
h3{
  font-size: 16px;
  display: inline-block;
  color: #fff;
}
h4{
  font-size: 12px;
  color: #fff;
}
.search{
  padding: 0;
  margin: 0;
  position: fixed;
  width: 100%;
}
.header{
  height: 100%;
  background: linear-gradient(300deg,#c4e8fb,#2a95f8);
  size: 12px;
  padding-left: 25px;
  padding-right: 25px;
}
.bold{
  font-weight:bold;
  color: #fff;
}
.yunshi{
  display: flex;
  margin-top:5px;
  width: 300px;
}
p{
  color: #dddddd;
  font-size: 12px;
}

.line:last-child {
  border: 0;
}
.line {
  border-right: 1px solid #bbb;
}
.luck{
  margin-top: 20px;
  margin-bottom: 10px;
}
.chuangkou{
  height: 500px;
  background: #fff;
  border-top-left-radius: 5%;
  border-top-right-radius: 5%;
  width: 100%;
  margin-top: 10px;
}
.my-swipe .van-swipe-item {
  font-size: 20px;
  text-align: center;
}
.my-swipe{
  border-top-left-radius: 5%;
  border-top-right-radius: 5%;
  width: 90%;
  margin: 0 auto;
}

.hline,.hline1,.hline2{
  float:right;
  height: 15px;
  margin-top: 20px;
  margin-left: 5px;
  background:#fefdfd;
  position: relative;
  border-radius: 20%;
}
.hline{
  width: 25%;
}
.hline1{
  width: 50%;
}
.hline2{
  width: 65%;
}


</style> 